<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getKnowledgeDetailAPI } from '@/apis/knowledge'
import { pushRemarkAPI } from '@/apis/remark'
import { useUserStore } from '@/stores/userStore'

const route = useRoute()
const id = route.params.id

const knowledge = ref({})
let time = ''

const getKnowledgeDetail = async () => {
    const res = await getKnowledgeDetailAPI(id)
    // console.log(res);
    if (res.code === 2000) {
        knowledge.value = res.data
        const publishTime = knowledge.value.updateTime.split(' ')[0].split('-')
        time = `${publishTime[0]}年${publishTime[1]}月${publishTime[2]}日`
    }
}

const userStore = useUserStore()
const remarkContent = ref('')
const pushRemark = async () => {
    if (!remarkContent.value) {
        ElMessage({ type: 'warning', message: '评论不能为空' })
        return
    }
    const res = await pushRemarkAPI({ knowledgeId: id, content: remarkContent.value })
    if (res.code === 2000) {
        remarkContent.value = ''
        getKnowledgeDetail()
        ElMessage({ type: 'success', message: '评论成功' })
    }
}

onMounted(() => {
    getKnowledgeDetail()
})
</script>

<template>
<div class="knowledge-page">
<div class="page-l">
    <div class="knowledge-header">
        <div class="title">{{ knowledge.title }}</div>
        <div class="info-container">
            <div>发布时间：{{ time }}</div>
            <div>来源：专家投稿</div>
            <div>作者：{{ knowledge.author?.realName }}</div>
            <div>阅读量：9999</div>
        </div>
    </div>
    <div class="knowledge-content" v-html="knowledge.content"></div>
</div>
<div class="page-r">
    <div class="comment-push-container" v-if="userStore.token">
        <div class="comment-push-header"><h2>发布评论</h2></div>
        <div class="comment-push-body">
            <div class="comment-container">
                <textarea name="comment" id="comment" v-model="remarkContent"></textarea>
            </div>
        </div>
        <a href="#" class="push-btn" @click="pushRemark">评论</a>
    </div>
    <div class="comment-list-container">
        <div class="comment-list-header"><h2>评论区</h2></div>
        <div class="comment-empty" v-if="knowledge.remarks?.length === 0">
            此处还没有人留下足迹
        </div>
        <div class="comment-list-body" v-else>
            <ul>
                <li v-for="remark in knowledge.remarks" :key="remark.id">
                    <div class="comment-avatar">{{ remark.author?.username }}</div>
                    <div class="comment-date">{{ remark.updateTime }}</div>
                    <div class="comment-content">{{ remark.content }}</div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>
</template>

<style scoped lang='scss'>
.knowledge-page {
    display: flex;
    justify-content: space-between;
    width: 1280px;
    margin: 20px auto;

    .page-l {
        width: 850px;
        min-height: 600px;
        padding: 20px 50px;
        background-color: #fff;
        
        .knowledge-header {
            padding: 20px 0;
            padding-bottom: 10px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e8e8e8;

            .title {
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 20px;
            }

            .info-container {
                display: flex;
                justify-content: space-between;
                height: 25px;

                >div {
                    height: 100%;
                    line-height: 25px;
                    font-size: 12px;
                    color: #999;
                }
            }
        }

        .knowledge-content {
            letter-spacing: 1px;
            text-align: justify;
        }
    }

    .page-r {
        width: 410px;
    }
}

.comment-list-container {
    min-height: 100px;
    padding: 0 25px;
    padding-bottom: 10px;
    background-color: #fff;

    .comment-list-header {
        text-align: center;
        user-select: none;
        border-bottom: 1px solid #e8e8e8;
        overflow: hidden;
    }

    .comment-empty {
        text-align: center;
        line-height: 100px;
        user-select: none;
    }

    .comment-list-body {
        ul {
            margin-top: 20px;
            list-style: none;

            .comment-avatar {
                font-size: 15px;
                font-weight: 600;
            }

            .comment-date {
                color: #a1a1a1;
                font-size: 11px;
                line-height: 25px;
                margin-bottom: 10px;
            }

            .comment-content {
                line-height: 30px;
                font-size: 15px;
                padding-bottom: 20px;
                margin-bottom: 30px;
                border-bottom: 1px solid #e8e8e8;
            }
        }
    }
}

.comment-push-container {
    padding-bottom: 20px;
    margin-bottom: 20px;
    background-color: #fff;

    .comment-push-header {
        text-align: center;
        user-select: none;
        border-bottom: 1px solid #e8e8e8;
        overflow: hidden;
    }

    .comment-push-body {
        display: flex;
        justify-content: center;
        padding: 20px 0;

        .comment-container {
            width: 300px;
            min-height: 100px;
            border: 1px solid #a7a7a7;

            textarea {
                width: 100%;
                height: 100%;
                font-size: 16px;
                padding: 10px;
                outline: none;
                border: none;
                resize: none;
                font-family:  "Arial"
            }
        }
    }

    .push-btn {
        display: block;
        width: 100px;
        height: 36px;
        line-height: 35px;
        margin-left: 55px;
        text-align: center;
        font-size: 14px;
        border: 1px solid #a7a7a7;
        transition: all .1s;

        &:hover {
            color: #39bf3e;
            border-color: #39bf3e;
        }
    }
}
</style>
